<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link rel="stylesheet" href="../../layui/css/layui.css?v=1" media="all">
    <script src="../../js/jquery/1.x/jquery.js?v=1"></script>
    <script src="../../layui/layui.js?v=1" charset="utf-8"></script>
    <script src="../../js/config.js?v=1"></script>
    <script src="../../js/public.js?v=1"></script>
    <script src="../../js/function.js?v=1"></script>
    <link rel="stylesheet" href="../../css/public.css?v=1">
    <link rel="stylesheet" href="../../css/patient/pituitart_type.css?v=1">
</head>

<body>
    <div class="container">
        <div class="table-title">
            <p>新病例登记</p>
        </div>
        <div class="add-container">
            <div class="add-step">
                <ul class="step-list">
                    <li class="step-item" style="float:left;">
                        <img src="../../img/step1_lanse.png">
                        <p>基本信息</p>
                    </li>
                    <li class="step-item">
                        <img src="../../img/step2_lanse.png">
                        <p>垂体疾病类型</p>
                    </li>
                    <li class="step-item" style="float:right;">
                        <img src="../../img/step3_huise.png">
                        <p>生成个性化问卷</p>
                    </li>
                    <div class="clear"></div>
                </ul>
                <div class="add-step-hr"></div>
            </div>
            <div class="baseinfo-box">
                <div class="baseinfo-box-title">
                    <p>垂体疾病类型</p>
                </div>
                <div class="baseinfo-box-title" style="font-size:14px;color:#333333;">
                    <p>关于垂体疾病描述符合以下哪条？</p>
                </div>
                <form class="layui-form">
                    <div class="baseinfo-item">
                        <div class="layui-form-item">
                            <div class="layui-form-label">a.是否诊断为垂体瘤</div>
                            <div class="layui-input-inline" style="float:right;margin-right:200px;">
                                <button class="sex-btn" type="button" data-val="1">是</button>
                                <button class="sex-btn" type="button" data-val="0">否</button>
                                <!--<button class="sex-btn sex-btn-checked" type="button" data-val="0">否</button>-->
                                <input type="hidden" name="has" value="2">
                            </div>
                        </div>
                    </div>
                    <div class="has-pituitary" style="display:none;">
                        <div class="baseinfo-item">
                            <div class="layui-form-item">
                                <div class="layui-form-label">b.垂体瘤功能状态：</div>
                            </div>
                        </div>
                        <div class="baseinfo-item">
                            <div class="layui-form-item">
                                <input type="checkbox" name="types" lay-skin="primary" title="无功能瘤" value="1">
                                <input type="checkbox" name="types" lay-skin="primary" title="GH瘤" value="2">
                                <input type="checkbox" name="types" lay-skin="primary" title="PRL瘤" value="3">
                                <input type="checkbox" name="types" lay-skin="primary" title="ACTH瘤" value="4">
                                <input type="checkbox" name="types" lay-skin="primary" title="TSH瘤" value="5">
                                <input type="checkbox" name="types" lay-skin="primary" title="GnH瘤（FSH/LH瘤）" value="6">
                                <input type="checkbox" name="types" lay-skin="primary" title="未评估" value="7">
                            </div>
                        </div>
                    </div>
                    <div class="no-has-pituitary" style="display:none;">
                        <div class="baseinfo-item">
                            <div class="layui-form-item">
                                <div class="layui-form-label">c.其他垂体疾病：</div>
                            </div>
                        </div>
                        <div class="baseinfo-item">
                            <div class="layui-form-item">
                                <input type="checkbox" name="types" value="11" lay-skin="primary" title="Rathke囊肿">
                                <input type="checkbox" name="types" value="12" lay-skin="primary" title="颅咽管瘤">
                                <input type="checkbox" name="types" value="13" lay-skin="primary" title="垂体柄阻断综合征">
                                <input type="checkbox" name="types" value="14" lay-skin="primary" title="淋巴细胞性垂体炎">
                                <input type="checkbox" name="types" value="15" lay-skin="primary" title="组织增生症">
                                <input type="checkbox" name="types" value="16" lay-skin="primary" title="生殖细胞瘤">
                                <input type="checkbox" name="types" value="17" lay-skin="primary" title="垂体柄增粗（病因未明）">
                            </div>
                        </div>
                    </div>
                    <div class="baseinfo-item-btn">
                        <button type="button" class="submit-btn" lay-submit="" lay-filter="submit-btn">生成个性化问卷</button>
                    </div>
                </form>
            </div>
        </div s>
        <div class="result-box">
            <img src="../../img/shengchengwenjuan.png">
            <div class="result-progress">
                <div class="layui-progress layui-inline" lay-filter="result-progress">
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                </div>
                <p class="layui-inline">生成中</p>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</body>
<script>
    $(document).ready(function() {
        var height = $(window).height() - 2;
        //$('.container').height(height);
        //$('.add-container').height(height - 51);
        $('.result-box').height(height - 151);
        layui.use(['element', 'form', 'layer', 'laydate', 'laypage'], function() {
            var element = layui.element;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var laypage = layui.laypage;
            //出生日期
            laydate.render({
                elem: '#bday'
            });
            // $('.sex-btn').attr('data-val','2') ;
            $('.sex-btn').click(function() {
                if ($(this).hasClass('sex-btn-checked')) {
                    console.log('true')
                } else {
                    $(this).addClass('sex-btn-checked');
                    $(this).siblings().removeClass('sex-btn-checked');
                    var value = $(this).attr('data-val');
                    $('input[name=has]').val(value);
                    if (value == 1) {
                        console.log(1)
                        $('.has-pituitary').show();
                        $('.no-has-pituitary').hide();
                        //把no-has-pituitary下的checkbox清空
                        $('.no-has-pituitary input[name=types]').each(function() {
                            $(this).attr('checked', false);
                        })
                        form.render();
                    } else {
                        console.log(2)
                        $('.has-pituitary').hide();
                        $('.no-has-pituitary').show();
                        //把has-pituitary下的checkbox清空
                        $('.has-pituitary input[name=types]').each(function() {
                            $(this).attr('checked', false);
                        })
                        form.render();
                    }
                }
            });
            form.on('submit(submit-btn)', function(data) {
                var params = data.field;
                var types = [];
                $('input[name=types]').each(function() {
                    var checked = $(this).prop('checked');
                    if (checked == true) {
                        types.push($(this).val());
                    }
                });
                params.types = types.join(',');
                params.user_id = getLocalStorage('patient_id');
                console.log(params);
                ajax_post(configUrl.patientPituitary, params, (res) => {
                    if (res.status == 0) {
                        $('.add-container').hide();
                        $('.result-box').show();
                        //倒计时2s进度条变成100%
                        var n = 0,
                            timer = setInterval(function() {
                                n = n + 50;
                                if (n > 100) {
                                    n = 100;
                                    clearInterval(timer);
                                    layer.msg('生成成功', {
                                        icon: 1,
                                        time: 1000
                                    }, function() {
                                        window.location.href = './qss/qss1.html';
                                    });
                                }
                                element.progress('result-progress', n + '%');
                                console.log(n);
                            }, 300 + Math.random() * 1000);
                    } else {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1500
                        });
                    }
                });

            });

        })
    })
</script>

</html>